<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>留言本</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        #success,#fail {
            display: none;
        }
        .MessageBlock {
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
        }
    </style>

  </head>
  <body>

    <h1>我的留言本</h1>
    <div class="container">
        <div class="row">
            <form class="form-horizontal col-lg-6">
                <div class="form-group">
                    <label for="Name" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                    <input type="text" class="form-control" id="Name" name="Name" placeholder="姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="mess" class="col-sm-2 control-label">留言</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="3" name="mess" id="mess"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button id="Submit" type="button" class="btn btn-success">提交</button>
                    </div>
                </div>
                <div class="alert alert-success" role="alert" id="success">
                    <a href="#" class="alert-link">表单已经成功提交</a>
                </div>
                <div class="alert alert-danger" role="alert" id="fail">
                    <a href="#" class="alert-link">表单提交失败</a>
                </div>
            </form>
        </div>
        <nav>
            <ul class="pagination">
                <% for(var i = 1;i <= pageamount; i ++) {%>
                    <li class="pageNumber" data-page="<%= i%>"><a href="#"><%= i%></a></li>
                <% }%>
            </ul>
        </nav>

        <div id="Allmess">
            <!-- 使用模板之后追加内容地方 -->
        </div>
    </div>

    <!-- 使用模板 -->
    <script type="text/template" id="model">  
        <div class="MessageBlock">
            <p>【姓名】{{= Name }}</p>
            <p>【留言】{{= mess }}</p>
            <p>【时间】{{= Time }}</p>
            <p><a href="/delete?id={{=id}}" class="delete">删除</a></p>
        </div>
    </script>

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/underscore-noflect.js"></script>
    <script>
        var nowpage = 1;
        $(".pageNumber:first").addClass("active");
        $(".pageNumber").click(function(){      // 给所有的页码按钮添加监听
            nowpage = parseInt($(this).attr("data-page"));
            getData(nowpage);   // 重新发起请求
            $(this).addClass("active").siblings().removeClass("active");
        })

        getData(1)  // 默认请求第一页数据
        // Ajax请求数据
        function getData(page){
            // page从0开始计算
            $.get("/read?page=" + (page - 1),function(result){
            var compiled = _.template($("#model").html())  // 模板
            $("#Allmess").html("")       // 清空全部留言中的所有节点
            for(var i=0;i<result.result.length;i++){
                var html = compiled({
                    mess:result.result[i].mess,
                    Name:result.result[i].Name,
                    Time:result.result[i].Time,
                    id : result.result[i]._id
                })   // 数据绑定
                $("#Allmess").append($(html));
            }
            }); 
        }

        // Ajax提交
        $("#Submit").click(function(){
            $("#success").hide();
            $("#fail").hide();      // 下次再次提交的时候隐藏框
            $.post("/Submit",{
                "Name" : $("#Name").val(),
                "mess" : $("#mess").val(),
            },function(result){
                if(result.result == 1){
                    // 数据库真的存储了但是当前页面无法显示，需要刷新，才能从Ajax得到，所以先用一个假盒子凑数
                    $("#success").fadeIn();  
                    var compiled = _.template($("#model").html());
                    var html = compiled({mess:$("#mess").val(),Name:$("#Name").val(),Time:new Date()});   
                    $(html).insertBefore($("#Allmess"));
                }else if(result.result == -1){
                    $("#fail").fadeIn();
                }
            });
        })

    </script>
  </body>
</html>